<template>
	<up-popup :show="show1" @close="close(1)" :closeable="true" :round="12" bgColor="#F7F7F7">
		<view class="title-top">选择售后类型</view>
		<view class="applybox">
			<view class="title">选择售后类型:</view>
			<view class="choose">
				<block v-for="(item,index) in list" :key="index">
					<view :class="index1 == index?'active':'item'" @click="index1 = index">
						{{item.name}}
					</view>
				</block>

			</view>
		</view>
		<view class="after-box">
			<view class="order-item">
				<view class="top">
					<span>订单编号：{{orderData.refund_no}}</span>
				</view>
				<up-divider></up-divider>
				<block v-for="(proitem,proindex) in orderData.deatils" :key="proindex">
					<view class="bottom">
						<img :src="proitem.order.picture" alt="" class="left" />
						<view class="right">
							<view class="name_price">
								<view class="name">
									{{proitem.order.goods_name}}
								</view>
								<view class="price">
									￥
									<text class="text">{{proitem.order.price}}</text>
								</view>
							</view>
							<view class="size">
								<span>{{proitem.order.attr}}</span> x{{proitem.order.num}}
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<button class="add-btn-apply" @click="confirm(1)">确认退款</button>
	</up-popup>

	<up-popup :show="show2" @close="close(2)" :closeable="true" :round="12" bgColor="#fff">
		<view class="title-top">选择退款原因</view>
		<up-divider></up-divider>
		<view class="resonbox">
			<up-radio-group v-model="radiovalue1" placement="column" @change="groupChange" iconPlacement="right">
				<up-radio :customStyle="{marginBottom: '27rpx'}" v-for="(item, index) in radiolist1" :key="index"
					:label="item.name" :name="index" @change="index2 = index">
				</up-radio>
			</up-radio-group>
		</view>
		<button class="add-btn-apply" @click="confirm(2)">下一步</button>
	</up-popup>

	<up-popup :show="show3" @close="close(3)" :closeable="true" :round="12" bgColor="#fff">
		<view class="title-top">上传描述凭证</view>
		<view class="uploadbox">
			<up-textarea class="textarea" v-model="value1" placeholder="补充描述，有助于商家更好的处理售后的问题"
				border="none"></up-textarea>
			<up-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="6" multiple :maxCount="9"
				width="250" height="150">
				<view class="upload">
					<up-icon name="camera" size="24"></up-icon>
					上传凭证，最多9张
				</view>
			</up-upload>
		</view>
		<button class="add-btn-apply" @click="confirm(3)">下一步</button>
	</up-popup>

	<up-popup :show="show4" @close="close(4)" :closeable="true" :round="12" bgColor="#F7F7F7">
		<view class="title-top">确认退货信息</view>
		<view class="apply-sure-box">
			<view class="order-item">
				<view class="top">
					<span>订单编号：{{orderData.refund_no}}</span>
				</view>
				<up-divider></up-divider>
				<block v-for="(proitem,proindex) in orderData.deatils" :key="proindex">
					<view class="bottom">
						<img :src="proitem.order.picture" alt="" class="left" />
						<view class="right">
							<view class="name_price">
								<view class="name">
									{{proitem.order.goods_name}}
								</view>
								<view class="price">
									￥
									<text class="text">{{proitem.order.price}}</text>
								</view>
							</view>
							<view class="size">
								<span>{{proitem.order.attr}}</span> x{{proitem.order.num}}
							</view>
						</view>
					</view>
				</block>
			</view>
			<up-cell-group :border="false">
				<up-cell :border="false" title="货物状态" :value="list[index1].name" isLink></up-cell>
				<up-cell :border="false" title="退款原因" :value="radiolist1[index2].name" isLink></up-cell>
				<up-cell :border="false" title="退款金额" :value="orderData.order_amount" isLink></up-cell>
				<up-cell :border="false" title="上传描述凭证" value="已上传" isLink></up-cell>
			</up-cell-group>
		</view>
		<view class="apply-sure-box">
			<up-cell-group :border="false">
				<up-cell :border="false" title="商品总价" :value="orderData.order_amount" isLink></up-cell>
				<up-cell :border="false" title="实付" :value="orderData.pay_amount" isLink></up-cell>
			</up-cell-group>
		</view>
		<button class="add-btn-apply" @click="confirm(4)" style="margin-top: 75rpx;">提交申请</button>
	</up-popup>
</template>

<script>
	export default {

		data() {
			return {
				show1: false,
				index1: 0,
				show2: false,
				index2: 0,
				show3: false,
				show4: false,
				orderData: {},
				list: [{
						name: '仅退款'
					},
					{
						name: '换货'
					},
					{
						name: '退货退款'
					}
				],
				radiolist1: [{
						name: '与商家协商一致退款',
						disabled: false,
					},
					{
						name: '快递一直未送到',
						disabled: false,
					},
					{
						name: '其他',
						disabled: false,
					}
				]
			};
		},
		methods: {
			setup(e) {
				this.show1 = true;
				this.orderData = e
				console.log(e)
				console.log(this.orderData)
			},
			close(e) {
				switch (e) {
					case 1:
						this.show1 = false
						break;
					case 2:
						this.show2 = false;
						break;
					case 3:
						this.show3 = false;
						break;
					default:
						this.show4 = false;
						break
				}
			},
			confirm(e) {
				switch (e) {
					case 1:
						this.index1 = e
						this.show1 = false;
						this.show2 = true;
						break;
					case 2:
						this.index2 = e
						this.show2 = false;
						this.show3 = true;
						break;
					case 3:
						this.show3 = false;
						this.show4 = true;
						break;
					default:
						uni.navigateTo({
							url: '/pages/after_sale/after_sale_info'
						})
						break;
				}
			},
			// 删除图片
			deletePic(event) {
				this.fileList.value.splice(event.index, 1);
			},

			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this.fileList.value.length;
				lists.map((item) => {
					this.fileList.value.push({
						...item,
						status: 'uploading',
						message: '上传中',
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = this.uploadFilePromise(lists[i].url);
					let item = this.fileList.value[fileListLen];
					this.fileList.value.splice(fileListLen, 1, {
						...item,
						status: 'success',
						message: '',
						url: result,
					});
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test',
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data);
							}, 1000);
						},
					});
				});
			}
		},
	}
</script>

<style lang="scss">
	.title-top {
		font-size: 40rpx;
		text-align: center;
		margin: 20rpx auto;
		margin-top: 40rpx;
	}

	.applybox {
		width: 718rpx;
		height: 190rpx;
		border-radius: 20rpx;
		background: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		margin: 10rpx auto;

		.title {
			font-size: 36rpx;
			color: #333;
		}

		.choose {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;

			.item {
				width: 212rpx;
				height: 66rpx;
				border-radius: 10rpx;
				border: 2px solid rgba(0, 0, 0, 0.2);
				box-sizing: border-box;
				color: rgba(51, 51, 51, 0.6);
				font-size: 36rpx;
				text-align: center;
				line-height: 66rpx;
			}

			.active {
				@extend .item;
				border: 2px solid #E94816;
				color: #E94816;
			}
		}
	}

	.resonbox {
		padding: 46rpx;
		box-sizing: border-box;
	}

	.uploadbox {
		width: 696rpx;
		height: 482rpx;
		border-radius: 10rpx;
		opacity: 1;
		margin: 20rpx auto;
		background: #F7F7F7;
		padding: 16rpx;
		box-sizing: border-box;

		.u-textarea {
			background-color: transparent;
		}

		.upload {
			width: 688rpx;
			height: 212rpx;
			border-radius: 20rpx;
			opacity: 1;
			margin: 0 auto;
			background: #F7F7F7;
			@include flex(column);
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
		}
	}

	.apply-sure-box {
		width: 718rpx;
		border-radius: 20rpx;
		opacity: 1;
		margin: 10rpx auto;
		background: #FFFFFF;

	}

	.order-item {
		width: 718rpx;
		border-radius: 20px;
		margin: 16rpx auto;
		opacity: 1;
		background: #FFFFFF;
		padding: 24rpx 20rpx;
		box-sizing: border-box;

		.top {
			font-size: 26rpx;
			font-weight: normal;
			color: #8D8989;
			@include flex(row);
			justify-content: space-between;
			align-items: center;
		}

		.middle {
			width: 678rpx;
			height: 156rpx;
			border-radius: 10rpx;
			opacity: 1;
			margin: auto;
			margin-bottom: 20rpx;
			background: #F9F9F9;
			padding: 20rpx;
			box-sizing: border-box;
			@include flex(row);
			align-items: center;
			justify-content: space-between;

			.middle_left {
				height: 100%;

				.img {
					width: 32.48rpx;
					height: 32rpx;
				}
			}

			.middle_middle {
				height: 100%;
				width: 600rpx;
				margin-left: 14rpx;
				@include flex(column);
				justify-content: space-between;
				font-size: 24rpx;
				color: #8D8989;
				line-height: 37.44rpx;

				.status {
					font-size: 28rpx;
					color: #3D3D3D;
				}
			}
		}

		.bottom {
			@include flex(row);

			.left {
				width: 150rpx;
				height: 150rpx;
			}

			.right {
				flex: 1;
				margin-left: 12rpx;
				font-size: 28rpx;
				font-weight: normal;
				color: #272727;

				.name_price {
					@include flex(row);
					justify-content: space-between;

					.name {
						width: 300rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}


				}

				.size {
					font-size: 24rpx;
					font-weight: normal;
					color: #737373;
					margin-top: 6rpx;
				}
			}

		}

		.btn-box {
			@include flex(column);
			justify-content: flex-end;
			align-items: flex-end;

			.btn {
				@include flex(row)
			}
		}

		.price {
			font-size: 20rpx;

			.text {
				font-weight: 500;
				font-size: 28rpx;
			}
		}
	}

	.add-btn-apply {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 630rpx;
		height: 85.54rpx;
		border-radius: 92rpx;
		margin: 60rpx auto;
		margin-top: 200rpx;
		font-size: $font-lg;
		color: #fff;
		background: #08AFFE;
	}
</style>